<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>SocketIO客户端测试环境</title>
  <base>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
  <style>
    body {
      padding: 20px;
    }
    #console {
      height: 450px;
      overflow: auto;
    }
    .connect-msg {
      color: green;
    }
    .disconnect-msg {
      color: red;
    }
  </style>
</head>

<body>
<h1>客户端测试环境</h1>
<hr style="height:1px;border:none;border-top:1px solid black;" />

<div style="width: 700px; float: left">
  <h3>SocketClient建立连接</h3>
  <div style="border: 1px;">

    <label>socketio服务端地址:</label>
    <!--

      http://localhost 服务端ip
                  9999 服务端socket端口（服务端提供）
                test或socketIO 命名空间（可自定义）如果不定义命名空间，默认是/     比如：http://localhost:9999?userId=12345
                userId 用户id参数（可自定义）

       ps:因为我定义了命名空间/test和/socketIO，所以我这里也可以用
          http://localhost:9999/test?userId=12345
          http://localhost:9999/socketIO?userId=12345
         这里我用http://localhost:9999?userId=12345建立连接，因为这里还不涉及到请求不同命名空间的方法
      -->
    <input type="text" id="url" value="http://localhost:9999?userId=12345" style="width: 500px;">
    <br>
    <br>
    <button id="connect" style="width: 100px;">建立连接</button>
    <button id="disconnect" style="width: 100px;">断开连接</button>


  </div>

  <hr style="height:1px;border:none;border-top:1px solid black;" />

  <h3>SocketClient发送消息</h3>
  <div style="border: 1px;">
    <label>socketEvent名称:</label><input type="text" id="socketEvent" value="getUserRooms">
    <br><br>
    <textarea  id="content" maxlength="1000" cols="40" rows="5" placeholder="请输入内容"></textarea>
    <button id="send" style="width: 100px;">发送消息</button>
  </div>

  <hr style="height:1px;border:none;border-top:1px solid black;" />

</div>
<div style="float: left;margin-left: 50px;">
  <h3>SocketIO互动消息</h3>
  <button id="clean" style="width: 100px;">清理输出</button>
  <div id="console" class="well"></div>
</div>


</body>

<script type="text/javascript">
  var socket ;
  var errorCount = 0;
  var isConnected = false;
  var maxError = 5;

  //连接
  function connect(url) {

    //var opts = {
    //    query: 'userId='+userId
    //};
    //socket = io.connect(url, opts);

    socket = io.connect(url);

    //socket.nsp = "/socketIO";//定义命名空间

    console.log(socket)

    //监听本次连接回调函数
    socket.on('connect', function () {
      isConnected =true;
      console.log("连接成功");
      serverOutput('<span class="connect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>连接成功</span>');
      errorCount=0;
    });
    //监听消息
    socket.on('message', function (data) {
      output('<span class="connect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + data + ' </span>');
      console.log(data);
    });

    //监听断开
    socket.on('disconnect', function () {
      isConnected =false;
      console.log("连接断开");
      serverOutput('<span class="disconnect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + '已下线! </span>');
    });
    //监听断开错误
    socket.on('connect_error', function(data){
      serverOutput('<span class="disconnect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>;' + '连接错误-'+data+' </span>');
      errorCount++;
      if(errorCount>=maxError){
        socket.disconnect();
      }
    });
    //监听连接超时
    socket.on('connect_timeout', function(data){
      serverOutput('<span class="disconnect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + '连接超时-'+data+' </span>');
      errorCount++;
      if(errorCount>=maxError){
        socket.disconnect();
      }
    });
    //监听错误
    socket.on('error', function(data){
      serverOutput('<span class="disconnect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + '系统错误-'+data+' </span>');
      errorCount++;
      if(errorCount>=maxError){
        socket.disconnect();
      }
    });

    /*socket.on('ack', function(data){

        console.log("ack:"+data)
        var str = '消息发送失败';
        if(data==1){
            str = '消息发送成功';
        }
        serverOutput('<span class="connect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + str+' </span>');

    });*/
  }

  function output(message) {
    var element = $("<div>" + " " + message + "</div>");
    $('#console').prepend(element);
  }

  function serverOutput(message) {
    var element = $("<div>" + message + "</div>");
    $('#console').prepend(element);
  }

  //连接
  $("#connect").click(function(){
    if(!isConnected){
      var url =  $("#url").val();
      connect(url);
    }else {
      serverOutput('<span class="disconnect-msg"><font color="blue">'+getNowTime()+'&nbsp;</font>' + '已经成功建立连接，不要重复建立！！！ </span>');
    }
  })


  //断开连接
  $("#disconnect").click(function(){
    if(isConnected){
      socket.disconnect();
    }
  })

  //发送消息
  $("#send").click(function(){
    var socketEvent =  $("#socketEvent").val();//自定义的事件名称
    var content  = $("#content").val();//发送的内容
    socket.emit(socketEvent,content,function(data1,data2){
      console.log("ack1:"+data1);
      console.log("ack2:"+data2);
    });
  })

  //清理消息
  $("#clean").click(function(){
    $('#console').html("");
  })

  function getNowTime(){
    var date=new Date();
    var year=date.getFullYear(); //获取当前年份
    var mon=date.getMonth()+1; //获取当前月份
    var da=date.getDate(); //获取当前日
    var h=date.getHours(); //获取小时
    var m=date.getMinutes(); //获取分钟
    var s=date.getSeconds(); //获取秒
    var ms=date.getMilliseconds();
    var d=document.getElementById('Date');
    var date =year+'/'+mon+'/'+da+' '+h+':'+m+':'+s+':'+ms;
    return date;
  }
</script>
</html>

